<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormRules, ComponentSize, FormInstance, } from 'element-plus';
import { ElLoading, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import service from '../service/index';
import { useAuthorizationStore } from '../stores/authorization';
import { genSign } from '@/plugin';
// 创建 store 实例
const authorizationStore = useAuthorizationStore();

const { login } = service;
const router = useRouter()

interface RuleForm {
  username: string;
  password: string;
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
})

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入用户名称', trigger: 'blur' },
    { max: 20, message: '用户名称最大长度20', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { max: 20, message: '用户密码最大长度20', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const { username, password } = ruleForm;
      login({
        username,
        password: genSign(password)
      }).then(res => {
        loading.close();
        const data = res.data;
        if (data.code === 1) {
          ElMessage({
            showClose: true,
            message: data.msg,
            type: 'success',
          })
          authorizationStore.setAuthorization(data.data.token);
          router.push('/');
        }
      }).catch(err => {
        ElMessage({
          showClose: true,
          message: err,
          type: 'error',
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const goRegister = () => {
  router.push('/register');
}
</script>

<template>
  <div class="container">
    <div class="card">
      <div class="title">welcome To xiao ji AI</div>
      <div class="form">
        <div class="form-title"><b>登 录</b></div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
          :size="formSize" status-icon>
          <el-form-item label="账号：" prop="email">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" @keyup.enter="submitForm(ruleFormRef)" clearable />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" show-password v-model="ruleForm.password" placeholder="请输入密码" clearable
              @keyup.enter="submitForm(ruleFormRef)" />
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" autocomplete="off" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button type="warning" autocomplete="off" @click="goRegister">注册</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
  overflow: hidden;

  .card {
    margin: 200px auto;
    width: 500px;

    .title {
      text-align: center;
      font-size: 35px;
      padding: 20px;
      color: #ffffff;
      font-family: "MV Boli";
      font-weight: bold;
    }

    .form {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;

      .form-title {
        margin: 20px 0;
        text-align: center;
        font-size: 24px;
      }
    }

    .btn {
      margin: 50px 0 20px 0;
      text-align: right;
    }
  }
}
</style>